<template>
  <div class="log-container">
    <ButtonGroup
      v-if="showBtn"
      :options="topButton"
      class="button-container"
      @click="handleButtonClick"
    />
    <MainTableList
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="paginationMixin"
      :scroll="getScroll"
      slot-name="legalNo"
      @change="handleTableChange"
      @number-click="handleNumberClick"
    />
  </div>
</template>

<script>
import MainTableList from './mainTableList.vue';
import { postLegalListByPage } from '@/api/customerApi.js';
import mixinTable from '@/mixins/mixin-table.js';
export default {
  components: {
    MainTableList,
  },
  mixins: [mixinTable],
  props: {
    code: {
      type: [String, Number],
      default: '',
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    keyTabs: {
      type: String,
      default: '5',
    },
    formInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dataSource: [],
      list: [],
      loading: false,
    };
  },
  computed: {
    getScroll() {
      return this.showBtn ? { x: '100%', y: '53vh' } : { x: '100%', y: 300 }
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '法人编号',
          dataIndex: 'legalNo',
          ellipsis: true,
          scopedSlots: { customRender: 'legalNo' },
        },
        {
          align: 'center',
          title: '法人名称',
          dataIndex: 'legalName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '付款条件和账期',
          ellipsis: true,
          dataIndex: 'settlementPeriod',
        },
        {
          align: 'center',
          title: '创建人',
          ellipsis: true,
          dataIndex: 'createUserName',
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
    topButton() {
      return [
        {
          key: 'add',
          type: 'primary',
          label: '新增法人',
          icon: 'plus',
        },
      ];
    },
  },
  watch: {
    keyTabs: {
      handler(newVal) {
        newVal === '5' && this.getList();
      },
      immediate: true,
    }, 
  },
  created() {
    // this.getList();
  },
  methods: {
    handleInsertChange() {
      this.getList();
    },
    getParams() {
      const page = {
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        customerNo: this.code,
      };
      return page;
    },
    async getList() {
      const data = this.getParams();
      this.loading = true;
      const result = await postLegalListByPage({
        ...data
      }).finally(() => (this.loading = false));
      this.dataSource = result?.data?.data?.records || [];
      this.paginationMixin.total = result?.data?.data?.total || 0;
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    addCallback() {
      // this.$message.error('该功能暂未开发！');
      const router = this.$router.resolve({
        path: '/corporate-information',
        query: {
          type: 'addCorporate',
          customerName: this.formInfo.customerName,
          name: this.formInfo.name,
          customerNo: this.code
        }
      })
      window.open(router.href, '_blank');
    },
    // 编号点击
    handleNumberClick(record) {
      const router = this.$router.resolve({
        path: '/corporate-information',
        query: {
          id: record.id,
          type: 'detailCorporate'
        }
      })
      window.open(router.href, '_blank');
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.getList();
    }
  },
};
</script>

<style lang="less" scoped>
.log-container {
  width: 100%;
}
.item-container {
  display: flex;
  align-items: center;
}
.button-container {
  margin-bottom: 20px;
}
.table-container {
  margin-bottom: 40px;
}
/deep/ .poros-select-selection {
  border: none;
}
</style>
